<template>
  <div class="sys-search2">
    <div class="sys-search2-main">
      <el-form v-bind="formProps" size="mini" inline>
        <div class="sys-search2-default clearfix">
          <slot>
          </slot>
          <div class="sys-search2-btn">
            <a href="javascript:;" v-if="$slots['form-adv']" @click="advSearch = !advSearch">
              <i class="el-icon-arrow-down" v-show="!advSearch"></i>
              <i class="el-icon-arrow-up" v-show="advSearch"></i>
              高级搜索
            </a>
            <slot name="form-action">
              <el-button icon="el-icon-search" size="mini" type="primary" @click="query">搜索</el-button>
              <el-button icon="el-icon-refresh-right" size="mini" @click="clear">重置</el-button>
            </slot>
          </div>
        </div>
        <collapse-transition>
          <div class="sys-search2-adv" v-show="advSearch">
            <slot name="form-adv"></slot>
          </div>
        </collapse-transition>

      </el-form>
    </div>
  </div>
</template>

<script>
import collapseTransition from 'element-ui/lib/transitions/collapse-transition'
import {simpleClearForm} from './common';
import {Form} from 'element-ui';

export default {
  name: 'sys-query2',
  cnName: '列表查询条件-2',
  components: {
    collapseTransition
  },
  props: {
    ...Form.props,
    labelWidth: {
      type: String,
      default: '100px'
    },
    labelPosition: {
      type: String,
      default: 'right'
    },
    size: {
      type: String,
      default: 'small'
    },
    model: Object,
    rule: Object,
    expandAble: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      advSearch: false
    }
  },
  methods: {
    query() {
      this.$emit('query', this.model)
    },
    clear() {
      simpleClearForm(this.model)
      this.$emit('clear', this.model)
    }
  },
  computed: {
    formProps() {
      const formKeys = Object.keys(Form.props)
      const prop = {}
      Object.keys(this.$props).forEach(key => {
        if (formKeys.includes(key) && this.$props[key]) {
          prop[key] = this.$props[key]
        }
      })
      return prop
    }
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.sys-search2 {
  border-bottom: 5px solid #F0F0F0;

  &-main {
    position: relative;
    padding: 10px;
  }

  &-btn {
    float: right;
  }

  &-adv {
    margin-top: 10px;
    padding-top: 5px;
    border-top: 1px solid #ececec;
  }

  &-btn {
    a {
      margin: 0 10px 0 0;
      color: #576374;
      font-size: 12px;
    }
  }

  /deep/ .el-form {
    .el-form-item--small.el-form-item,
    .el-form-item--mini.el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
